<template>
  <div class="header">
    <div class="leftText text">
      <router-link
        v-bind:to="{ name: 'detection' }"
        :class="pageName == 'detection' ? 'on' : ''"
        >检测</router-link
      >
    </div>
	<div class="leftText1 text">
	  <router-link
	    v-bind:to="{ name: 'importantDection' }"
	    :class="pageName == 'importantDection' ? 'on' : ''"
	    >重点</router-link
	  >
	</div>
 
    <div class="rightText text">
      <router-link
        v-bind:to="{ name: 'sampling' }"
        :class="pageName == 'sampling' ? 'on' : ''"
        >采样</router-link
      >
    </div>
	<div class="rightText1 text">
	  <router-link
	    v-bind:to="{ name: 'goodsEnvironment' }"
	    :class="pageName == 'goodsEnvironment' ? 'on' : ''"
	    >物品</router-link
	  >
	</div>
 
    <div class="time">
      {{ nowday }} {{ week }}<img src="../../../static/out.png" @click="back" />
    </div>
    <div class="uesr">
      <img class="user" src="../../../static/user.png" />{{ userName
      }}<img
        v-if="path != '/index'"
        src="../../../static/return.png"
        class="return"
        @click="addreturn"
      />
    </div>

    <el-dialog title="温馨提示" :visible.sync="dialogVisible" width="30%">
      <span>是否退出登录</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="primary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "TabBar",
  data() {
    return {
      nowday:
        new Date().getFullYear() +
        "年" +
        (new Date().getMonth() + 1) +
        "月" +
        new Date().getDate() +
        "日",
      nowsecond: "18:05:04",
      week: "",
      path: "",
	  userName:'',
      dialogVisible: false,
    };
  },
  computed: {
    pageName() {
      return this.$route.name || "index";
    },
  },
  activated() {
    this.path = this.$route.path;
  },
  created() {
    this.week = this.getweak();
	this.userName = localStorage.getItem('userName')
  },
  methods: {
    back() {
      this.dialogVisible = true;
    },
    primary() {
      this.dialogVisible = false;
      window.location.replace(
        "https://gzsfy.ganzhou.gov.cn/zgq-epana-nucleate/login"
      );
    },
    addreturn() {
      this.$router.replace("/index");
    },
    // 获取星期数
    getweak() {
      var week = new Date().getDay();
      if (week == 0) {
        week = "星期日";
      } else if (week == 1) {
        week = "星期一";
      } else if (week == 2) {
        week = "星期二";
      } else if (week == 3) {
        week = "星期三";
      } else if (week == 4) {
        week = "星期四";
      } else if (week == 5) {
        week = "星期五";
      } else if (week == 6) {
        week = "星期六";
      }
      return week;
    },
  },
};
</script>

<style scoped lang="less">
.header {
  height: 101px;
  background: url("../../../static/toubu.png") no-repeat;
  background-size: cover;
  position: relative;
}
.leftText {
  position: absolute;
  left: 302px;
  top: 60px;
  color: #fff;
}
.rightText {
  position: absolute;
  right: 482px;
  top: 60px;
}
.leftText1 {
  position: absolute;
  left: 482px;
  top: 60px;
  color: #fff;
}

.rightText1 {
  position: absolute;
  right: 302px;
  top: 60px;
}

.text a {
  color: #fff;
  font-size: 18rpx;
  cursor: pointer;
  text-decoration: none;
}
.text a:hover {
  color: #00f9f9;
}
.header .on {
  color: #00f9f9;
}
.time {
  position: absolute;
  top: 30px;
  color: #fff;
  font-size: 14px;
  right: 30px;
  img {
    vertical-align: middle;
    width: 65px;
    height: 26px;
    margin-left: 14px;
    // margin-top: 8px;
    cursor: pointer;
  }
}
.uesr {
  position: absolute;
  top: 30px;
  color: #00f9f9;
  font-size: 14px;
  left: 30px;
  img {
    vertical-align: middle;
  }
  .user {
    width: 32px;
    height: 32px;
    margin-right: 10px;
  }
  .return {
    width: 84px;
    height: 32px;
    margin-left: 10px;
    cursor: pointer;
  }
}
</style>
